<template>

    <div>
        <h4>专题精选</h4>
        <van-swipe :loop="false" :width="300" class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="item in topicListArr" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <p class="box1">{{ item.title }}<span style="color:brown">{{item.price_info | formatMoney}}</span></p>
                <p class="box2">{{ item.subtitle }}</p>
            </van-swipe-item>
        </van-swipe>

    </div>


</template>
<script>
export default {
    name: '',
    props: ['topicListArr'],
    data() {
        return {}
    },
    components: {
    },
    watch: {},
    methods: {
    },
    beforeCreate() { },
    created() { },
    beforeMount() { },
    mounted() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style scoped lang="less">
div h4 {
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 10px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    // text-align: center;

    margin-left: 15px;

    img {
        width: 300px;
        height: 200px;
    }
}

.box1 {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    left: 0;
    color: black;
}

.box2 {
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    width: 90%;
    text-overflow: ellipsis;
    font-size: 16px;
    color: black;
}
</style>